<template>
  <div class="content-wrapper">
    <el-row type="flex" :gutter="20" style="padding-left: 20px">
      <h2 style="margin-top: 23px; margin-left: 5px">用户管理</h2>
      <el-form :inline="true"  class="demo-form-inline" style="margin-left: 50px; margin-top: 20px">
        <el-form-item>
          <div slot="label" style="color:white">
            用户名：
          </div>
          <el-input v-model="username"></el-input>
        </el-form-item>
        <el-button class="el-blue-button" @click="getUsers"><i class="el-icon-search"></i> &nbsp;查询</el-button>
        <el-button class="el-blue-button" @click="addUsers('新增通知')"><i class="el-icon-plus"></i>&nbsp;新增</el-button>
        <el-button class="el-blue-button" @click="reset"><i class="el-icon-refresh-right"></i>&nbsp;重置</el-button>
      </el-form>
    </el-row>
    <el-table
        :data="users"
        style="width: 100%"  v-loading="loading">
        <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
        <el-table-column prop="username" label="用户名" width="150" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center" width="150"></el-table-column>
        <el-table-column prop="cellphone" label="办公电话"  align="center"></el-table-column>
        <el-table-column prop="tele" label="联系电话" align="center"></el-table-column>
        <el-table-column prop="email" label="邮箱"  align="center"></el-table-column>
        <el-table-column label="操作" width="230" align="center">
          <template slot-scope="scope">
            <el-button class="el-blue-button" size="mini" @click="goViewWithQuery('查看', scope.row)">查看</el-button>
            <el-button class="el-blue-button" size="mini" @click="goViewWithQuery('编辑', scope.row)">修改</el-button>
            <el-button class="el-blue-button" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    <el-pagination
      style="margin-top: 10px;"
      background
      :page-size="10"
      @current-change="handleCurrentChange"
      layout="total, prev, pager, next, jumper"
      :current-page.sync="currentPage"
      :total=total>
    </el-pagination>
    <user-dialog :visible-flag='userDialogForm' :userform="userform" @close-dialog="closeUserDialog"></user-dialog>
    <currency-dialog :visible-flag='addDialogForm' :userform="addform" :rules="currencyRules"
                     @close-dialog="closeCurrencyDialog" :dialogKind="dialogKind" :userId="userId"></currency-dialog>
  </div>
</template>

<script>
import request from '@/network/request'
import userDialog from './userDialog'
import currencyDialog from './currencyDialog'
export default {
  name: 'index',
  components: {
    userDialog,
    currencyDialog
  },
  data () {
    const userForm = {
      cellphone: '',
      email: '',
      name: '',
      permissionlv: '',
      position: '',
      remark: '',
      sex: '男',
      status: '',
      tele: '',
      username: '',
      pw: '',
      pw_repeat: ''
    }
    return {
      userForm,
      userId: '',
      dialogKind: 0, // 0:修改信息dialog；1：增加信息dialog
      username: '',
      userDialogForm: false,
      addDialogForm: false,
      formLabelWidth: '120px',
      users: [
        {
          cellphone: 'cellphone',
          email: 'email',
          name: '溜亿馅',
          permissionlv: 'permissionlv',
          position: 'position',
          remark: 'remark',
          sex: '男',
          status: 'status',
          tele: '未添加',
          username: '等风来'
        }],
      userform: this.easyClone(userForm),
      addform: this.easyClone(userForm),
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        pw: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        pw_repeat: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        tele: [
          { required: true, message: '请输入办公电话', trigger: 'blur' },
          { min: 2, max: 11, message: '长度在 2 到 11 个字符', trigger: 'blur' }
        ]
      },
      currencyRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        tele: [
          { required: true, message: '请输入办公电话', trigger: 'blur' },
          { min: 2, max: 11, message: '长度在 2 到 11 个字符', trigger: 'blur' }
        ]
      },
      loading: true,
      total: 0,
      currentPage: 1
    }
  },
  beforeMount () {
    const user = JSON.parse(window.localStorage.getItem('user'))
    this.userId = user.value.userId
    this.reset()
  },
  methods: {
    goViewWithQuery (name, data) {
      switch (name) {
        case '查看': {
          this.userDialogForm = true
          this.userform = data
          break
        }
        case '编辑': {
          this.dialogKind = 0
          this.addDialogForm = true
          this.addform = data
          break
        }
      }
    },
    handleDelete (index, row) {
      this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          method: 'post',
          url: `/user/deleteuser?username=${row.username}&randomID=${this.userId}`
        }).then((res) => {
          if (res.status === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.requestUserList()
          } else {
            this.$message.error('删除失败!')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getUsers () {
      this.requestUserList(this.username)
    },
    addUsers () {
      this.dialogKind = 1
      this.addform = this.easyClone(this.userForm)
      this.addDialogForm = true
    },
    reset () {
      this.username = ''
      this.currentPage = 1
      this.requestUserList()
    },
    requestUserList () {
      this.loading = true
      request({
        method: 'post',
        url: `/user/getuser?username=${this.username}&randomID=${this.userId}&pagenum=${this.currentPage}`
      }).then((res) => {
        this.users = res.data.data.records
        this.total = res.data.data.totalrecords
        this.loading = false
      })
    },
    /**
     * 通过JSON转换的方式进行简单的深克隆
     * 不支持属性中含有函数、正则，只支持标准JSON格式的对象
     * @param obj Object
     * @return Object
     */
    easyClone (obj) {
      return JSON.parse(JSON.stringify(obj))
    },
    closeUserDialog () {
      this.userDialogForm = false
    },
    closeCurrencyDialog () {
      this.addDialogForm = false
      this.requestUserList()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.requestUserList()
    }
  }
}
</script>

<style lang="scss" scoped>
  .content-wrapper{
    .userform-content{
      margin-right: 50px;
      .form-title{
        color: white;
      }
    }
  }
</style>
